<template>
  <div>
        <headNav></headNav>
         <div class="head">
            <img style="width:100%;vertical-align: middle;" src="./../static/images/head.jpg" alt="">
         </div>
         <div class="content">
               <div class="con_body">
                   <div class="con1">
                       <div class="con1_l" @click="toIntro(1)">
                             <img class="tit" src="./../static/images/tit1.png" alt="">
                             <div class="intrDiv">
                                    <p>杭州教育短视频联盟是在新媒体短视频蓬勃发展的背景下，面向杭州全域组建的校园短视频创作、分享、展示、学习的平台。建设目的是通过日常活动的开展、项目化平台运作、联盟学习交流等方式，一方面提升杭州各区、各学校短视频创作的意识和能力；另一方面利用视频化的手段和传播渠道，更生动地讲好杭州教育发展故事。</p>
                             </div>
                       </div>
                       <div class="con1_r">
                            <img class="tit" src="./../static/images/tit2.png" alt="">
                            <el-carousel class="ztsw" indicator-position="none">
                              <el-carousel-item>
                                <div  style="width:869px;height:251px;position:relative;" >
                                  <img @click="actlml"  class="recent_activity" src="./../static/images/act_lml.png" alt="">
                                </div>
                              </el-carousel-item>
                              <el-carousel-item>
                                <div  style="width:869px;height:251px;position:relative;" >
                                    <img @click="hzjj" class="recent_activity" src="./../static/images/hzjj.png" alt="">
                                </div>
                              </el-carousel-item>
                              <el-carousel-item>
                                <div  style="width:869px;height:251px;position:relative;" >
                                  <a href="https://z.hangzhou.com.cn/2024/jyft/" target="_blank">
                                    <img  class="recent_activity" src="./../static/images/jtedu.png" alt="">
                                  </a>
                                </div>
                              </el-carousel-item>
                              <el-carousel-item>
                                <div  style="width:869px;height:251px;position:relative;" >
                                  <!-- <img class="re_icon" style="width:45px;height:45px;cursor: pointer;" src="./../static/images/right_icon.png" alt=""> -->
                                  <img @click="act75"  class="recent_activity" src="./../static/images/recent_activity.png" alt="">
                                </div>
                              </el-carousel-item>
                            </el-carousel>
                       </div>
                   </div>

               </div>
                      <div class="up_btn" @click="upload"></div>
                      <div class="list">
                        <img class="tit" src="./../static/images/tit3.png" alt="">
                        <div class="list_nav">
                            <div v-on:mouseover="handleMouseOver(index)" v-on:mouseout="handleMouseOut(index)" class="list_item" :class="index==ind ? 'list_item_active' : '' " @click="clickListItem(index,item.id)" v-for="(item,index) in listNav" :key="index">
                                  {{item.name}}
                            </div>
                        </div>
                        <div class="water_div">
                            <vue-waterfall-easy @click="handleWater" :loadingDotCount="0" :reachBottomDistance="30" :gap="10" :width="1400" :imgWidth="340" :imgsArr="imgsArr">
                              <div class="info" slot-scope="props">
                                <p class="infop p1">{{props.value.title}}</p>
                                <p class="infop p2">{{props.value.school}}</p>
                              </div>
                            </vue-waterfall-easy>
                        </div>
                      <div class="morediv">
                        <img @click="getData" class="more" src="./../static/images/home_more.png" alt="">
                      </div>

               </div>
               <div class="dr">
                    <img style="margin:20px 0 40px 0" class="tit" src="./../static/images/tit4.png" alt="">
                    <div class="dr_con">
                           <router-link to="/drList?type=1" class="dr_div"><img class="dr_img" src="./../static/images/dr1.png" alt=""></router-link>
                           <router-link to="/drList?type=2"  class="dr_div"><img class="dr_img" src="./../static/images/dr2.png" alt=""></router-link>
                           <router-link to="/drList?type=3"  class="dr_div"><img class="dr_img" src="./../static/images/dr3.png" alt=""></router-link>
                           <router-link to="/drList?type=4"  class="dr_div"><img class="dr_img" src="./../static/images/dr4.png" alt=""></router-link>
                           <router-link to="/drList?type=5" class="dr_div"><img class="dr_img" src="./../static/images/dr5.png" alt=""></router-link>
                           <router-link to="/drList?type=0"  class="dr_div"><img class="dr_img" src="./../static/images/dr6.png" alt=""></router-link>
                    </div>
               </div>
               <div class="lm_sch">
                    <img style="  margin: 100px 0 60px 0;" class="tit" src="./../static/images/tit5.png" alt="">
                    <div class="lm_sch_pos">
                          <div class="lm_sch_con">
                            <div :class="index==sch_ind ? 'sch_item_active' : '' " v-on:mouseover="handleMouseOver1(index)" v-on:mouseout="handleMouseOut1(index)" class="sch_item" v-for="(item,index) in sch" :key="index">{{item}}</div>
                          </div>
                          <el-collapse-transition name="el-zoom-in-top" v-show="show">
                              <div class="school" v-show="show">
                                    <div class="school_list"  >
                                      <div class="school_list_item" v-for="(item,index) in schoolList" :key="index">{{item.name}}</div>
                                    </div>
                                
                              </div>
                          </el-collapse-transition>
                    </div>
              
                </div>
         </div>
         <footComponent></footComponent>
  </div>
</template>


<script>
// import vueWaterfallEasy from 'vue-waterfall-easy';

import vueWaterfallEasy from 'vue-waterfall-easy';

import footComponent from '@/common/foot.vue';
import headNav from '@/common/headNav.vue';

export default {
  name: 'HomePage',
  components:{
     headNav,
     footComponent,
     vueWaterfallEasy
  },

  data(){
    return{
      show:false,
      ind:0,
      sch_ind:-1,
      new_ind:0,
      listNav:[
           {name:'推 荐',id:0,},
           {name:'上城区',id:1,},
           {name:'拱墅区',id:2,},
           {name:'西湖区',id:17,},
           {name:'滨江区',id:23,},
           {name:'萧山区',id:29,},
           {name:'余杭区',id:36,},
           {name:'临平区',id:42,},
           {name:'钱塘区',id:48,},
           {name:'富阳区',id:54,},
           {name:'临安区',id:58,},
           {name:'桐庐县',id:64,},
           {name:'淳安县',id:68,},
           {name:'建德市',id:72,},
           {name:'直属学校',id:3,},
      ],
      sch:['上城区','拱墅区','西湖区','滨江区','萧山区','余杭区','临平区','钱塘区','富阳区','临安区','桐庐县','淳安县','建德市','直属学校'],
      user:'1',
      area:[],
      schoolName:'',
      schoolList:[],
      recommendWorks:[],
      items: [],
      imgsArr:[],
      page:1
    }
  },

  computed:{
        isLoginSuccess(){
              return this.$store.state.isLoginSuccess
        },
  },
  created(){
     this.getSchool();
     this.getData()
     
  },
  mounted(){

  },
  methods:{
    // 杭州交警专题
    hzjj(){
      this.$router.push({
        path:'/intro',
        query: {
          id: 6
        }
      })
    },
    act75(){
       this.$router.push({
         path:'/articleIndex'
       })
    },
    actlml(){
       this.$router.push({
         path:'/thoughtIndex'
       })
      // this.$router.push({
      //               path:'/intro2',
      //               query: {
      //                   id: 7
      //               }
      //           })
    },
    toIntro(id){
       this.$router.push({
        path:'/intro',
        query: {
          id: id
        }
       })
    },
    clickListItem(index,id){
      this.new_ind = this.ind;
      this.ind = index;
      this.$router.push({
        path:'/list',
        query: {
          ind:index,
          id: id
        }
      })
    },
    handleMouseOver(index){
      this.ind =index;
    },
    handleMouseOut(){
      this.ind =  this.new_ind 
    },
    handleMouseOver1(index){
      this.sch_ind = index;
      this.schoolName = this.sch[index]
      this.show = true;
      this.getSchoolList()
    },
    handleMouseOut1(){
      this.sch_ind = -1
      this.show = false;
      this.schoolList = []
    },
    getSchool(){
      this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_areas').then(res=>{
        this.area = res.data.data
      })
    },
    getSchoolList(){
        this.area.forEach(item=>{
           if(item.name==this.schoolName){
            this.schoolList =  item.sons
           }
        })
    },
    upload(){
        // if(this.isLoginSuccess){
        //  this.$router.push('/upload')
        // }else{
        //      this.$router.push('/login')
        // }
        this.$message('系统维护中')
    },
    // 获取推荐的作品
    getData() {
      this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_works?area_id=0&page=' + this.page)
        .then(res => {
          var arr = []
          res.data.data.data.forEach(item=>{
            var obj = {}
              obj['title' ]= item.title
              obj['school'] = item.school
              obj['id'] = item.id
              // if(item.type==1){
              //   obj['src'] ='https://eduvideo.hangzhou.com.cn' + item.files[0].file_cover
              // }else{
              //   obj['src'] = item.files[0].full_file_path
              // }
              obj.src =item.poster
             arr.push(obj)
            })
            this.imgsArr = this.imgsArr.concat(arr)
            this.page++
        })
    }, 
    handleWater(item,val){
      // window.open(item.href, '_blank');
       this.$router.push({
           path:'/workDetail',
           query:{
            id:val.value.id
           }
       })
    }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.grid-container {
  height: 1800px; /* 瀑布流宽度 */
  position: relative;
}

.grid-item {
  float: left; /* 或 display: inline-block; */
  width: 340px; /* 每个项目宽度 */
  /* 间距 */
  position: absolute;
}
.grid-item img{width: 100%;}
.head{
  width: 100%;
}
.content{
  width: 100%;
  height: auto;
  background: url('./../static/images/content_bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 400px;
  margin-top: -3px;
}
.con_body{
  width: 1400px;
}
.con1{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.con1_l{
  height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
}
.tit{
  width:143px;height:35px
}
.intrDiv{
  width: 510px;
  height: 226px;
  background: url('./../static/images/lmintro_bg.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.intrDiv p{
  width: 400px;
  margin: 0;
  padding: 0;
  line-height: 30px;
  color: #fff;
  font-size: 16px;
  text-indent: 30px;
}
.recent{
  width: 869px;
  height: 251px;
  background: url('./../static/images/recent_activity.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  
}
.re_icon{
  position: absolute;
  right: 20px;
  top: calc(50% - 10px);
}
.up_btn{
  width: 545px;
  height: 95px;
  background: url('./../static/images/home_up_btn.png') no-repeat;
  background-size: 100% 100%;
  margin: 60px 0 90px 0;
  cursor: pointer;
}
.list{
  width: 1400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.list_item_active{

  color: #a6ebff !important;
  border: 1px solid #fff;
  border-radius: 30px;
}
.list_item:hover{
 
  color: #a6ebff;
  border: 1px solid #fff;
  border-radius: 30px;
  cursor: pointer;
}
.list_item{
  width: 100px;
  height: 45px;
  font-size: 20px;
  text-align: center;
  line-height: 45px;
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #fff, #ddf4fc, #a6ebff);
}
.list_nav{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 20px 0 60px 0;
}
.list_img{
  width: 1400px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
.img_item{
  width: 340px;
  box-sizing: border-box;
  margin-left: 13px;

}
.list_img .img_item:nth-child(4n+1){
  margin-left: 0 !important;
}

.img_item img{
  width: 340px;
  height: auto;
}
.dr,.lm_sch{
  width: 1400px;
}

.dr_con{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dr_img{
  width: 230px;
  height: 316px;
  object-fit: cover;
  cursor: pointer;
}
.dr_div{
  width: 100%;
}
.lm_sch_con{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  border: 1px solid #fff;
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #6275d3;
  
}
.lm_sch_pos{
  width: 100%;
  position: relative;

}
.sch_item{
  width: 100px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(to right, #fff, #ddf4fc, #a6ebff);
  cursor: pointer;
  font-size: 20px;
}
.sch_item_active{
  color: #a6ebff !important;
}
.school{
  width: 100%;
  height: auto;
  background-color: #fff;
  position: absolute;
  top: 30px;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
}
.school_list{
  margin: 45px 0 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: start;
  width: 80%;
  flex-wrap: wrap;
}
.school_list_item{
  margin: 10px;
  font-size: 20px;
  color:#000;
}
.footer{
  width: 100%;
  height: 410px;
  background-color: #171e3f;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
}
.foot_div{
  width: 1400px;
}
.foot_top{
  width: 100%;
  height: 126px;
  border-bottom:2px solid #3c468b;
}
.footimg1{
  width: 150px;
  height: 40px;
  margin-top: 35px;
}
.footimg2{
  width: 217px;
  height: 46px;
  margin-left: 40px;
  margin-top: 25px;
}
.foot_bottom{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  margin-top: 40px;
}
.foot_bottom p{
  margin: 0 ;
  padding: 0;
  color: #6275d3;
}
.foot_div1{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.foot_div1 a{
  text-decoration: none;
  color: #6275d3;
}
.foot_div2{
   margin: 0 110px 0 120px;
}
.infop{
  margin: 0;
  padding: 0;
}
.info{
  margin-bottom: 50px;
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
}
.p1{
  margin: 25px 0 20px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: calc(100% - 7px);
  line-height: 25px;
  padding-left: 7px;
  font-size: 20px;
  color: #fff;
}
.p2{
  padding-left: 7px;
  color: #9fc9e2;
  font-size: 18px;
}
.water_div>>>.vue-waterfall-easy-container .vue-waterfall-easy a.img-inner-box{

  box-shadow: none !important;
  border-radius:none !important;
  cursor: pointer !important;
}
/*cursor: pointer !important;
background-color: #171e3f !important;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%) !important;
border: 1px solid #EBEEF5 !important;
border-radius: 20px !important;
box-sizing: border-box !important;*/
.water_div{
  width: 1400px;
  height: 1000px;

}
.water_div>>>.vue-waterfall-easy-container::-webkit-scrollbar ,.water_div>>>.vue-waterfall-easy-scroll::-webkit-scrollbar {
  width: 0 !important;
  background-color: #f9f9f9;
}
.water_div>>>.vue-waterfall-easy-container .vue-waterfall-easy a.img-wraper > img{
  border-radius: 20px  !important;
  object-fit: cover !important;
}
.more{
  width: 312px;
  height: 84px;
  cursor: pointer;
}
.morediv{
  width: 1400px;
  height: 84px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.ztsw{
  width: 869px;
  height: 251px !important;
  box-sizing: border-box;
  overflow: hidden;
}
.ztsw>>>.el-carousel__container {
  position: relative;
  height: 251px !important;
}
.con1_r{
  width: 869px;
  height: 290px !important;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.recent_activity{
  position: absolute;
  left: 0;
  bottom: 0;
  cursor: pointer;
}
</style>
